<template>
    <div id="cinema">
        <div class="nav">
            <span>全城<i class="fa fa-caret-down"></i></span>
            <span>品牌<i class="fa fa-caret-down"></i></span>
            <span>特色<i class="fa fa-caret-down"></i></span>
        </div>
        <div>
            <ul>
                <li v-for="item in cinemaList" :key="item.id">
                    <p>
                        <span>{{item.name}}</span>
                        <span class="price">{{item.price}}</span>
                        <span class="price-desc">元起</span>
                    </p>
                    <p class="address">
                        <span>{{item.address}}</span>
                        <span>>{{item.distance}}km</span>
                    </p>
                    <p class="tips">
                        <span>小吃</span>
                        <span>折扣卡</span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default{
        name:'Cinema',
        methods:{
            getCinemaData(){
                var that = this;
                axios.get('/mock/api.json')
                .then(function (response) {
                    console.log(response);
                    if(response.status==200){
                        if(response.data && response.data.cinemaList){
                            that.cinemaList = response.data.cinemaList;
                        }
                    } 
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        },
        created(){
            this.getCinemaData();
        },
        data(){
            return{
                cinemaList:[]
            }
        }
    }
</script>
<style scoped>
    #cinema{
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .nav span{
        width: 33%;
        display: inline-block;
        text-align: center;
        height: 45px;
        line-height: 45px;
    }
    .nav{
        border-bottom: 1px solid #ccc;
    }
    i{
        margin-left: 5px;
    }
    li{
        margin: 10px;
        border-bottom: 1px solid #ccc;
    }
    .price{
        color: #e54847;
        margin: 0 10px;
    }
    .price-desc{
        color: #e54847;
        font-size: 12px;
    }
    .address span{
        font-size: 12px;
        color: #999;
    }
    .address span:last-child{
        float: right;
    }
    .tips span{
        border: 1px solid #f90;
        color: #f90;
    }
    .tips{
        margin: 10px 0;
    }
</style>